<template>
    <div id="ProjectScroll" style="margin: 10px 60px;">
        <el-card shadow="always" :body-style="{ padding: '0px' }" v-for="item in onePageProject" :key="item._id" style="inline-height: 200px;padding: 10px;margin: 10px;">
            <el-row>
                <el-col :span="9"><img :src="item.icon" style="width: 100%;"></el-col>
                <el-col :span="14" style="margin-left: 10px;">
                    <el-container>
                        <el-header style="padding: 0px;height:80px;">
                            <router-link to="" style="text-decoration:none;">
                                <!-- <h3 style="width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;">{{item.titleName}}</h3> -->
                                <h3 style="width:100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">{{item.titleName}}</h3>
                            </router-link>
                        </el-header>
                        <el-main style="padding: 0px;">
                            <p style="margin: 0px;width:100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">{{item.intro}}</p>
                        </el-main>
                        <el-footer style="padding: 0px;">
                            <div id="UserAction" class="clearfix" style="margin-top: 13px;line-height: 12px;">
                                <el-button type="text" id="likeButton">
                                    <i :class="collection?'iconfont icon-buoumaotubiao15':'iconfont icon-dianzan'"></i><span> 0</span>
                                </el-button>
                                <el-button type="text" id="collectionButton">
                                    <i :class="collection?'iconfont icon-unie601':'iconfont icon-shoucang'"></i><span> 0</span>
                                </el-button>
                                <span style="line-height:14px;display:inline-block;position: relative;left: 0px;">ID：1234556890</span>
                            </div>
                        </el-footer>
                    </el-container>
                </el-col>
            </el-row>
        </el-card>
        <div :class="loadMoreHide ? 'load-more-hide' : 'load-more-normal'" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
            <span v-show="loadingShow">Loading</span>
        </div>
    </div>
</template>

<script>
    import Axios from 'axios'
    export default {
        data() {
            return {
                projectClass: '',
                onePageProject: [],
                busy: false, //是否正在加载过程中
                loadingShow: true, // 加载中显示
                pageNo: 0,
                totalPage: 3,
                collection: true
            };
        },
        mounted() {
            this.getProjectClass();
        },
        methods: {
            getProjectClass() {
                var api = 'http://localhost:7080/api/phone/findProjectClass?level=0&limit=8';
                Axios.get(api).then((response) => {
                    this.projectClass = response.data;
                    console.log(this.projectClass);
                    this.onePageProject = this.projectClass.docs;
                    console.log(this.projectClass);
                }).catch((error) => {
                    console.log(error);
                })
            },
        loadMore: function() {
            if (this.pageNo >= totalPage) {
                this.busy = true; //已经是最后一页了，不需要再触发滚动加载了
                this.loadMoreHide = true; //已经是最后一页了，不需要高度了
            } else {
                this.busy = false;
                this.loadMoreHide = false;
            }
            this.pageNo++;
            this.busy = true;
            this.loadingShow = true;
            //官方示例中延迟了1秒，防止滚动条滚动时的频繁请求数据
            setTimeout(() => {
                //这里请求接口去拿数据，实际应该是调用一个请求数据的方法
                this.getAjaxData(true);
                this.loadingShow = false;
                this.busy = false;
            }, 1000);
        }
        }
    };
</script>

<style>
    /* .flex-container {
                                                display: -webkit-flex;
                                                display: flex;
                                                font-weight: bold;
                                                text-align: center;
                                                flex-flow: row nowrap;
                                            }
                                        
                                             @media all and (min-width: 2000px) {
                                                .flex-container {
                                                    -webkit-flex-flow: row nowrap;
                                                    flex-flow: row nowrap;
                                                }
                                                #leftCard {
                                                    flex: 3;
                                                }
                                                #rightCard {
                                                    flex: 2;
                                                }
                                            }
                                            
                                            @media all and (min-width: 1000px) {
                                                .flex-container {
                                                    -webkit-flex-flow: row wrap;
                                                    flex-flow: row wrap;
                                                }
                                                #leftCard {
                                                    order: 1;
                                                }
                                                #rightCard {
                                                    order: 2;
                                                }
                                            } */
    
    .load-more-normal {
        text-align: center;
        height: 60px;
        line-height: 60px;
    }
    
    .load-more-hide {
        height: 0;
    }
    
    #ProjectScroll.botton {
        padding: 0px;
    }
    
    #UserAction {
        position: absolute;
        bottom: 0px;
    }
    
    #ProjectScroll.image {
        width: auto;
        height: 100%;
        display: block;
    }
    
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    
    .clearfix:after {
        clear: both;
    }
</style>
